<template>
	<view>
		<u-sticky bgColor="#a3d8f5">
			<view class="mainpadding" :style="{paddingTop:menutop+'rpx'}">
				<view class="flexleft">
					<image src="@/static/image/system/hsz.png" class="hszclass" mode=""></image>
					<view class="xiaobai fonweight" style="font-size: 35rpx;">红十字基金会“孤寡老人大病救助基金”</view>
				</view>
				<view class="margin_top flexbetween">
					<u-icon name="arrow-left" color="#fff" size="24" @click="backpage()"></u-icon>
					<view class="xiaobai fonweight sanshier" style="font-size: 32rpx;">获得医疗申请</view>
					<image src="@/static/image/system/list.png" mode="" class="topliclass" @click="toplistfn"></image>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="ffffff radius margin_top">
				<view class="mainpadding flexleft" style="background-color: #fef4f8;border-radius: 20rpx 20rpx 0 0;">
					<image src="../../static/image/system/hsz.png" class="margin_right2"
						style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class=" fonweight xiaohei" style="font-size: 30rpx;">项目介绍</view>
				</view>
				<view class="xiahuaxian mainpadding2s xiaohui">
					<u-parse :content="jzxmjs"></u-parse>
				</view>
				<!-- <view class="mainpadding flexleft">
					<image src="../../static/image/system/hsz.png" class="margin_right2"
						style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class=" fonweight xiaohei" style="font-size: 30rpx;">救助条件</view>
				</view>
				<view class="xiahuaxian mainpadding2s xiaohui">
				<u-parse :content="jztj"></u-parse></view>
				<view class="mainpadding flexleft">
					<image src="../../static/image/system/hsz.png" class="margin_right2"
						style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class=" fonweight xiaohei" style="font-size: 30rpx;">救助标准</view>
				</view>
				<view class="xiahuaxian mainpadding2s xiaohui">
				<u-parse :content="jzbz"></u-parse></view> -->
			</view>
			<!-- <view class="ffffff radius margin_top">
				<view class="flexbetween mainpadding" style="background-color: #f8faf5;border-radius: 20rpx 20rpx 0 0;" @click="jumpurl('/pages/zhengce/jiuzhual')">
					<view class="flexleft">
						<image src="../../static/image/system/hsz.png" class="margin_right2"
							style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class=" fonweight xiaohei" style="font-size: 30rpx;">救助案例</view>
					</view>
					<view class="flexright">
						<view class="xiaohui titletext">更多</view>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>
				<view class="mainpadding2 ffffff" style="border-radius: 0 0 20rpx 20rpx;">
					<view class="flexbetween margin_top xiahuaxian" v-for="item in jzallist" :key="item.id"
						@click="jumpdetail('/pages/zhengce/jiuzhuxq?id=',item.id)">
						<image :src="item.image_text" mode="" class="radius" style="width: 200rpx;height: 150rpx;">
						</image>
						<view class="" style="width: 60%;">
							<view class="titletext xiaohei fonweight yhxk" style="width: 300rpx;">{{item.name}}</view>
							<view class="xiaohui smalltext margin_top2 xiankuan3">{{item.des}}</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="ffffff mainpadding">
			<view class="ershiba xiaohei fonweight">患者信息
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">姓名</view>
				<input placeholder="请输入" type="text" v-model="name" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">性别</view>
				<u-radio-group v-model="sex" placement="row" circle>
					<u-radio activeColor="#d41c19" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
					<u-radio activeColor="#d41c19" label="女" name="2"></u-radio>
				</u-radio-group>
			</view>
			<!-- <view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">年龄</view>
				<input placeholder="请输入" type="number" v-model="idCard" />
			</view> -->

			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">手机号（+86）</view>
				<input placeholder="请输入手机号" type="number" v-model="tel" />
			</view>	
			<view class="margin_top xiahuaxian flexbetween">
				<view class="flexleft">
					<view class="ershiba xiaohei margin_right2">验证码</view>
					<input placeholder="请输入验证码" type="number" v-model="captcha" />
				</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 1">发送验证码</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
			</view>
			<view class="margin_top flexleft">
				<view class="ershiba xiaohei margin_right2">家庭住址</view>
				<input placeholder="请输入" type="text" v-model="jtaddress" />
			</view>
		</view>
		
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">检查结果
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter tpbox " v-for="(item,index) in images_text" :key="index">
					<view class="tjtp">
						<image class="tjtp" :src="item" mode=""></image>
						<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
					</view>
				</view>
				<view class="flexcenter tpbox " @click="uploadImg(6,images,images_text)">
					<image class="tjtp" src="@/static/image/system/tjtp.png" mode=""></image>
				</view>
			</view>
			<view class="xiaohui ershiba margin_top">请上传检验报告</view>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">症状/病情
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<textarea style="width: 100%;" class="margin_top textarea" placeholder="可简单描述您的症状或病情..." maxlength="-1" 
				v-model="bqdes"></textarea>
		</view>
		<view class="flexcenter margin_top" @click="quan=quan?false:true">
			<view :class="quan?'yixuanzhong margin_right1':'weixuanzhong margin_right1'"></view>
			<u-icon v-if="quan" name="checkmark-circle-fill" color="#d41c19" size="20"></u-icon>
			<u-icon v-if="!quan" name="checkmark-circle-fill" color="#999" size="20"></u-icon>
			<view class="flexleft margin_left1">
				<view class="strongtext xiaohei">是否同意
					<text class=" xiaohong strongtext" @click.stop="jumpurl('/pages/mine/system?type=1')">《用户协议》</text>
					<text class="strongtext">或</text>
					<text class="xiaohong strongtext" @click.stop="jumpurl('/pages/mine/system?type=2')">《隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<view class="bigbtn" @click="submit()">加密提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext: 1,
				second: 59,
				captcha:"",
				// #ifdef H5
				menutop: 80,
				// #endif
				// #ifdef MP-WEIXIN
				menutop: 0,
				// #endif	
				jzallist:[],
				images: [],
				images_text: [],
				name:"",
				sex:"1",
				tel:"",
				jtaddress:"",
				bqdes:"",
				jzxmjs:"",
				jztj:"",
				jzbz:"",
				quan:false
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			// this.getjzal()
			this.getsystem()
		},
		methods: {
			// 发送验证码
			sendyzm() {
				let _this = this;
				if (_this.tel == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.tel,
					event: 'ylapply',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						httpRequest.toast('发送成功')
						_this.codetext = 2;
						_this.second = 59;
						let timer = setInterval(function() {
							if (_this.second > 1) {
								_this.second--;
							} else {
								clearInterval(timer);
								_this.codetext = 3;
							}
						}, 1000)
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			getsystem(){
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "jzset",
					type:"jzxmjs"
				}).then(res => {
					this.jzxmjs = res.data
				})
				// httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
				// 	pidtype: "jzset",
				// 	type:"jztj"
				// }).then(res => {
				// 	this.jztj = res.data
				// })
				// httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
				// 	pidtype: "jzset",
				// 	type:"jzbz"
				// }).then(res => {
				// 	this.jzbz = res.data
				// })
			},
			submit() {
				if (this.name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.tel == "") {
					httpRequest.toast("请输入手机号")
					return false
				}
				if (this.captcha == "") {
					httpRequest.toast("请输入验证码")
					return false
				}
				if (this.jtaddress == "") {
					httpRequest.toast("请输入家庭地址")
					return false
				}
				if (this.images.length==0) {
					httpRequest.toast("请上传照片")
					return false
				}
				if (this.bqdes == "") {
					httpRequest.toast("请输入病情描述")
					return false
				}
				if(this.quan==false){
					httpRequest.toast('请仔细阅读用户协议并勾选');
					return false
				}
				let data = {
					name: this.name,
					sex: this.sex,
					tel:this.tel,
					captcha:this.captcha,
					jtaddress:this.jtaddress,
					jcjg_images:this.images.join(),
					bqdes:this.bqdes
				}
				httpRequest.request("/api/user/ylApply", 'GET', data).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			getjzal(){
				httpRequest.request('/api/index/jzalIndex', 'GET', {
					page: 1,
					limit: 3
				}).then(res => {
					this.jzallist = res.data.data
				}).catch(err => {})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(6, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(6, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
		}
	}
</script>

<style>

</style>